<template>
  <div class="main">
    <Top name1='权限管理' name2="角色列表"></Top>
    <el-button class="addbtn" @click="addisplay=true" type="primary">添加角色</el-button>
 <!-- 详细限权 -->
      <template>
        <el-table
          :data="roles"
          style="width:1000px;border: 1px solid #DCDFE6;">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <table>
                  <tr style="border-bottom:1px solid #f5f6f7" v-for="ele in props.row.children" sortable="true" :key="ele.id">
                    <td >
                      <el-tag @close="delRight(props.row,ele.id)" closable type="warning"> {{ ele.authName }}</el-tag>
                    </td>
                    <td>
                      <p v-for="eles in ele.children" :key="eles.id">
                        <el-tag closable @close="delRight(props.row,eles.id)" type="danger">{{  eles.authName }}</el-tag>
                        <el-tag closable @close="delRight(props.row,eless.id)" v-for="eless in eles.children" :key="eless.id">
                          {{ eless.authName }}
                        </el-tag>
                      </p>
                    </td>
                    </tr>
                </table>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
            label="#"
            type="index"
            >
          </el-table-column>
          <el-table-column
            label="角色名称"
            prop="roleName">
          </el-table-column>
          <el-table-column
            label="角色描述"
            prop="roleDesc">
          </el-table-column>
          <el-table-column
            label="操作"> 
              <template slot-scope="scoped">
                  <el-tooltip class="item" effect="light" content="修改角色" placement="top">
                    <el-button class="sm" type="primary" @click="reset(scoped.row.id)" icon="el-icon-edit">编辑</el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="light" content="删除角色" placement="top">
                    <el-button class="sm" type="danger" @click="delRole(scoped.row.id)" icon="el-icon-delete">删除</el-button>
                  </el-tooltip>
                  <el-tooltip class="item" effect="light" content="分配权限" placement="top">
                    <el-button class="sm" type="warning" @click="getright(scoped.row)" icon="el-icon-setting">分配权限</el-button>
                  </el-tooltip>
              </template>
            </el-table-column>
          
        </el-table>
      </template>
<!-- 添加角色----------------------------------------- -->
    <el-dialog
      title="添加角色"
      :visible.sync="addisplay"
      width="400px"
      >
      <el-form  :model="addForm" ref="addForm" label-width="100px" class="demo-dynamic">
        <!-- 角色名 -->
        <el-form-item
          prop="roleName"
          label="角色名称"
          :rules="[
            { required: true, message: '请输入角色名称', trigger: 'blur' },
          ]"
        >
          <el-input style="width:200px" v-model="addForm.roleName"></el-input>
        </el-form-item>
        <!-- 角色描述 -->
        <el-form-item
          prop="roleDesc"
          label="角色描述"
          :rules="[
            { required: true, message: '请输入角色描述', trigger: 'blur' },
          ]"
        >
          <el-input style="width:200px" v-model="addForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addisplay = false">取 消</el-button>
        <el-button type="primary" @click="addAjax">确 定</el-button>
      </span>
    </el-dialog>
<!-- 修改角色 -->
    <el-dialog
      title="修改角色"
      :visible.sync="resetdisplay"
      width="400px"
      >
      <el-form  :model="resetForm" ref="resetForm" label-width="100px" class="demo-dynamic">
        <!-- 角色名 -->
        <el-form-item
          prop="roleName"
          label="角色名称"
          :rules="[
            { required: true, message: '请输入角色名称', trigger: 'blur' },
          ]"
        >
          <el-input style="width:200px" v-model="resetForm.roleName"></el-input>
        </el-form-item>
        <!-- 角色描述 -->
        <el-form-item
          prop="roleDesc"
          label="角色描述"
          :rules="[
            { required: true, message: '请输入角色描述', trigger: 'blur' }]">
          <el-input style="width:200px" v-model="resetForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetdisplay = false,$refs.resetForm.resetFields()">取 消</el-button>
        <el-button type="primary" @click="resetRole">确 定</el-button>
      </span>
    </el-dialog>
<!-- 权限分配 -->
    <el-dialog
      title="权限分配"
      :visible.sync="roleRightVisible"
      width="50%"
      @close="guan"
      >
      <el-tree
        :data="roleRightData"
        show-checkbox
        node-key="id"
        ref="tree"
        :props="defaultProps"
        default-expand-all
        :default-checked-keys="dws">
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="roleRightVisible = false">取 消</el-button>
        <el-button type="primary" @click="shezhi">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// 获取角色
// 添加删除角色
import { rolesAjax,addrolesAjax,delrolesAjax,delRightAjax,getrolebyIdAjax,resetroleAjax,getRightAjax,setRightAjax } from '../../api/roles'

import Top from '../../components/top.vue'
  export default {
    components:{
      Top
    },
    data () {
      return {
        roles:[],
        addisplay:false,
        addForm: {
          domains: [{
            value: ''
          }],
          roleName:'',
          roleDesc:'',
        },
        resetForm:{
          domains: [{
            value: ''
          }],
          id:0,
          roleName:'',
          roleDesc:'',
        },
        resetdisplay:false,
        roleRightData:[],
        defaultProps: {
          children: 'children',
          label: 'authName'
        },
        roleRightVisible : false,
        dw:['101','102'],
        dws:[],
        fenpeiId:0

      };
    },
    async created() {
      this.getdata();
    },
    methods:{
  // 获取角色列表
      async getdata(){
        let res =  await rolesAjax({})
        if(!res.data.meta.status==200){
          return this.$message({
            type:"error",
            message:"获取角色列表失败"
          })
        }
      this.roles = res.data.data
      }
      ,
  // 添加角色
      addAjax(){
        this.$refs.addForm.validate(async(validate)=>{
          if(!validate){
            this.addisplay = false
            return this.$message({
              message:'添加角色失败',
              type:'error'
            })
          }else{
            const res = await addrolesAjax({
              roleName:this.addForm.roleName,
              roleDesc:this.addForm.roleDesc
            })
            if(res.data.meta.status!=201){
              this.addisplay = false
              return this.$message({
                message:'添加角色失败',
                type:'error'
              })
            }
            this.$refs.addForm.resetFields();
            this.addisplay = false
            this.getdata();
            return this.$message({
                message:'添加角色成功',
                type:'success'
            })
          }
        })
      },
  // 删除角色
      delRole(id){
        console.log(id);
        this.$confirm('此操作将删除该角色, 是否继续?', '注意', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async ()=>{
          const res =  await delrolesAjax({
            id:id
          })
          if(res.data.meta.status!=200){
            return this.$message({
              type:"error",
              message:"删除角色失败"
            })
          }
          this.getdata();
          return this.$message({
              type:"success",
              message:"删除角色成功"
          })
        }).catch(()=>{
          return this.$message.info('取消删除角色')
        })
      },
  // 修改角色
      async reset(id){
        this.resetdisplay = true
        const res = await getrolebyIdAjax('roles/'+id)
        // console.log(res);
        if(res.data.meta.status!=200){
          return this.$message.error("获取当前角色失败")
        }else{
          this.resetForm.roleName = res.data.data.roleName
          this.resetForm.roleDesc = res.data.data.roleDesc
          this.resetForm.id = res.data.data.roleId
        }
      },
      resetRole(){
        this.$refs.resetForm.validate(async(valid)=>{
          if(!valid){
            this.resetdisplay = false
            return this.$message.error("信息填写错误")
          }
          // console.log(this.resetForm.id,this.resetForm.roleName,this.resetForm.roleDesc);
          const res = await resetroleAjax(
            "roles/"+this.resetForm.id,{
            roleName:this.resetForm.roleName,
            roleDesc:this.resetForm.roleDesc
          })
          console.log(res);
          if(res.data.meta.status!==200){
            this.resetdisplay = false
            return this.$message.error("角色编辑失败！")
          }
            this.getdata()
            this.resetdisplay = false
            return this.$message.success("角色编辑成功")
        })
      },
  // 删除权限
      delRight(role,rightId){
        this.$confirm('此操作将删除该权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async()=>{
              const res = await delRightAjax("roles/"+role.id+"/rights/"+rightId)
              console.log(res.data.data);
              if(res.data.meta.status !== 200){
                return this.$message.warning('删除权限失败')
              }
              role.children = res.data.data
              return this.$message.success('删除权限成功')
        }).catch(()=>{
          return this.$message.info('取消删除权限')
        })
      },
      xunhuan(arr){
        arr.forEach(ele => {
        if(ele.children){
          this.xunhuan(ele.children)
        }else{
          this.dws.push(ele.id);
        }
      });
      }
      ,
    getKeepRights(arr){
      this.xunhuan(arr)
    },
  // 权限分配
      // 获取权限
      async getright(role){
            const res = await getRightAjax({})
            this.roleRightData = res.data.data
            this.roleRightVisible = true
            var arr = role.children
            this.getKeepRights(arr)
            this.fenpeiId = role.id
      },
      guan(){
        this.dws = []
        this.fenpeiId = 0
      },
      async shezhi(){
        this.roleRightVisible = false 
        var str = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()).join(",")

        const res = await setRightAjax(this.fenpeiId,{rids:str})
        if(res.data.meta.status!==200){
          return this.$message.err("角色授权失败")
        }
        this.getdata()
        return this.$message.success("角色授权成功")
      }










    },
  }
</script>
<style lang='scss' scoped>
.main{
  .addbtn{
    margin: 0px 0 20px 0;
  }
  padding:30px 0 0 10%;
  .el-button{
    padding:10px 10px;
    font-size: 8px;
  }
  tr{
    display: flex;
    align-items: center;
  }
  .el-tag{
    margin: 5px 10px;
    margin-left: 5px;
  }
  table{
    tr{
      padding-left: 40px;
    }
  }
  /deep/.cell.cell.cell.cell.cell.cell.cell.cell.cell{
    padding: 0;
  }

}
</style>